<template>
	<view class="content">

		<view class="logo">
			<view class="s1">
				<image :src="vuex_theme.logo"></image>
				<text>{{ vuex_theme.name }}</text>
			</view>
		</view>
		<view class="login">
			<view class="title">您好，{{ vuex_user.nickname }} <text v-if="vuex_user.is_partner">（合伙人）</text></view>
			<view class="c1">获取商家活动系统权限，首先需要取得浏览资格</view>
			<view class="c2">请选择支付方式</view>
			<view class="c3">
				<view class="in-1" @click='type = 1' :class="{active: type == 1}"></view>
				<view class="text">现金{{ vuex_theme.shop_money }}元/年</view>
			</view>
			<view class="c3" v-if="userRawData.is_partner">
				<view class="in-1" @click='type = 2' :class="{active: type == 2 }"></view>
				<view class="text">支付绿石头{{ vuex_theme.merchant_renewal_stone }}个/年
					(当前绿石头{{userRawData.green_stone_amount}}个)</view>
			</view>
			<view class="c5">
				<view class="r1">
					<u-checkbox-group v-model="checkbox" placement="column" @change="checkboxChange">
						<u-checkbox class="boxTxt" style="margin: 0;"
							:customStyle="{marginBottom: '16rpx',fontSize:'12px'}" label='勾选和同意' labelSize='28rpx'
							labelColor='rgba(17, 2, 2, 1)' inactiveColor='rgba(10, 22, 41, 1)' activeColor="#7677eb" name='1'>
						</u-checkbox>
					</u-checkbox-group>
					<text @click="goAgreement(3)">《会员用户协议》</text>
				</view>
			</view>
		</view>

		<view class="but">
			<u-button type="primary" text="支付费用" color='#7677EB' @click="onSend()"></u-button>
		</view>

		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	import {
		getRawUserInfo
	} from '@/api/user.js'

	import conf from "@/common/config.js"
	import utils from "@/common/util.js"

	// #ifdef H5
	var jweixin = require('jweixin-module')
	// #endif


	export default {
		onLoad() {
			getRawUserInfo().then(res => {
				if (1 == res.code) {
					this.userRawData = res.data
					this.$u.vuex('vuex_user.mp_openid', res.data.mp_openid);
				}
			});
		},
		data() {
			return {
				type: 1,
				userRawData: '',
				checkbox: [],
				value: ''
			}
		},
		onShow() {
			if (this.vuex_token == '') {
				uni.redirectTo({
					url: '/pages/my/login'
				})
				return false;
			}

			// let endDate = new Date(this.vuex_user.shop_end_time)
			// let currentDate = new Date()
			// if (this.vuex_user.is_shop >= 1 && endDate > currentDate ) {
			//     uni.redirectTo({
			//         url: '/pages/activity/index'
			//     })
			// }
		},
		methods: {
			radioChange(n) {
				console.log('radioChange', n);
			},
			checkboxChange(n) {
				if (n[0] == '1') {
					this.value = 1
				} else {
					this.value = 0
				}
				console.log(this.value);
			},
			goAgreement(t) {
				uni.navigateTo({
					url: '/pages/index/web?type=agreement&t=' + t
				})
			},
			onSend() {
				if(!this.value) return this.$u.toast('请先阅读并同意协议')
				if (this.type == 1) {
					let that = this

					if (utils.isNormalBrowser()) {
						var obj = {
							pay_way: 'h5',
							type: 'buy_merchant_role', //创建支付的类型
							user_id: this.vuex_user.id // 用户id
						}
						var jsonString = JSON.stringify(obj);
						var urlEncodedData = encodeURIComponent(jsonString);

						window.location.href = '/index.php/api/order/createTransaction?info=' + urlEncodedData;
					} else if (utils.isWechatBrowser()) {
						if (!this.vuex_user.mp_openid) {
							uni.showModal({
								title: '提示',
								content: '用户使用微信浏览器支付需绑定超田公众号',
								success: function(res) {
									if (res.confirm) {
										let appid = conf.gzh_appid
										let uri =
											'https://h5.pyhhzapp.com/index.php/index/index/getopenid/user_id/' +
											that.vuex_user.id + '/currentpage/' + btoa(window.location.href)
											.replace('/', 'ctkkk')
										let authURL =
											`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;

										// console.log(authURL)
										window.location.href = authURL;
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							var obj = {
								pay_way: 'jssdk',
								type: 'buy_merchant_role', //创建支付的类型
								user_id: this.vuex_user.id // 用户id
							}
							var jsonString = JSON.stringify(obj);
							var urlEncodedData = encodeURIComponent(jsonString);

							// 有openid, 开始进行公众号的支付
							let url = window.location.href
							this.$API.jssdkConfig({
									url: url,
									api_list: [
										'chooseWXPay'
									].join("-")
								}).then(res => {
									console.log(res);
									let data = res.data
									if (res.code) {
										jweixin.config({
											debug: false,
											appId: data.appId,
											timestamp: data.timestamp,
											nonceStr: data.nonceStr,
											signature: data.signature,
											jsApiList: data.jsApiList,
										});
										jweixin.error(function(res) {
											// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
											console.log('anything wrong');
											console.log(res);
										})
									}
								})
								.then(() => {
									jweixin.ready(() => {
										this.$API.createTransaction({
											info: urlEncodedData
										}).then(res => {
											console.log(res);
											let data = res.data

											if (res.code) {
												jweixin.chooseWXPay({
													timestamp: data.timeStamp,
													nonceStr: data.nonceStr,
													package: data.package,
													signType: data.signType,
													paySign: data.paySign,
													success: (res) => {
														// 支付成功后的回调函数
														console.log(res);

														// 跳转到检查支付结果的中间页
														window.location.href = data
															.return_url
													}
												});
											}


										})
									})
								})

						}
					}
				} else {
					this.$API.sendPayhistory({
						type: this.type
					}).then(res => {
						this.$u.vuex('vuex_user', res.data.userInfo);
						uni.showModal({
							content: '开通成功',
							showCancel: false,
							success: function() {
								uni.navigateTo({
									url: '/pages/activity/index'
								})
							}
						})
					})
				}
			},
		}
	}
</script>


<style lang="scss">
	.content {
		@include flex(column);
		align-items: center;
		justify-content: center;
		width: 670rpx;
		margin: 32rpx auto;

		.logo {
			width: 598rpx;
			height: 80rpx;
			margin: 32rpx auto 0 auto;
			@include flex;
			justify-content: center;
			align-items: center;

			.s1 {
				@include flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					height: 80rpx;
					font-size: 40rpx;
					font-weight: 600;
					color: #3D3D3D;
					line-height: 80rpx;
					margin-left: 24rpx;
				}
			}
		}

		.login {
			width: 566rpx;
			background-color: #fff;
			border-radius: 48rpx;
			padding: 52rpx;
			margin-top: 60rpx;

			.title {
				// height: 36rpx;
				font-size: 34rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 600;
				color: #110202;
				line-height: 36rpx;
			}

			.c1 {
				height: 28rpx;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #7677EB;
				line-height: 28rpx;
				margin-top: 48rpx;
			}

			.c2 {
				height: 48rpx;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #7D8592;
				line-height: 48rpx;
				margin-top: 48rpx;
			}

			.c3 {
				margin-top: 28rpx;
				@include flex;
				align-items: center;

				.in-1 {
					width: 40rpx;
					height: 40rpx;
					background: #D8E0F0;
					border-radius: 50%;
					position: relative;

					&::before {
						content: "";
						position: absolute;
						width: 32rpx;
						height: 32rpx;
						background: #fff;
						border-radius: 50%;
						left: 4rpx;
						top: 4rpx;
					}

					&.active {
						&::after {
							content: "";
							position: absolute;
							width: 20rpx;
							height: 20rpx;
							background: #7677EB;
							border-radius: 50%;
							left: 10rpx;
							top: 10rpx;
						}
					}
				}

				.text {
					// height: 42rpx;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #110202;
					line-height: 42rpx;
					margin-left: 28rpx;
				}
			}

		}

		.but {
			width: 286rpx;
			height: 88rpx;
			margin: 60rpx auto;

			/deep/ .u-button {
				height: 88rpx;
				border-radius: 28rpx;
			}
		}
	}

	.c5 {
		@include flex;
		margin-top: 56rpx;
		justify-content: space-between;
		align-items: center;

		.r1 {
			@include flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: rgba(17, 2, 2, 1);
			}
		}

		.r2 {
			font-size: 26rpx;
		}
	}
</style>